<%@page contentType="text/html; charset=utf-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>简单的倒计时按钮-www.bootstrapmb.com</title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        .ec-btn {
            width: 100px;
            height: 50px;
            border-radius: 10px;
            border: 1px solid #F6F6F6;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<button class="ec-btn">获取验证码</button>
<script>
    $('.ec-btn').click(function () {
        setTime(60);
    });

    function setTime(time) {
        if (!isNaN(time) && time > 0) {
            $('.ec-btn').html("倒计时" + time + "秒");
            $('.ec-btn').attr('disabled', true);
            var b = setInterval(function () {
                time--;
                if (time <= 0) {
                    $('.ec-btn').html('重新发送');
                    $('.ec-btn').attr('disabled', false);
                    clearInterval(b);
                } else {
                    $('.ec-btn').html("倒计时" + time + "秒");
                }
            }, 1000);
        } else {
            alert('时间有误')
        }
    }
</script>
</body>
</html>
